<template>
  <div class="user-edit" v-if="!isNull(userInfo)">
    <div class="user-info animation-slideInDown">
      <div class="avatar">
        <img v-if="isNull(userInfo.avatar)" src="../../assets/imgs/nouser.png" />
        <img v-else :src="userInfo.avatar">
        <input class="img-file" type="file" accept="image/*" @change="editUserInfo('avatar', $event)" />
      </div>
      <div class="info">
        <b @click="editUserInfo('name')">{{ userInfo.name }}</b>
        <i>当前为编辑状态，点击地图可选择位置创建打卡记录</i>
        <i class="date-btn" @click="getMarksDate($event, true)">{{ getMarkText }} 》</i>
        <div class="date-list" @click="getMarksDate(false)" v-if="!isNull(markDateList)">
          <div class="inner scroll-base" :style="dateListStyle">
            <div class="item" v-for="item in markDateList" :key="item.markDate">
              <b @click.stop="getMarks(item.markDate,item.dateStr)">{{ item.dateStr }}</b>
            </div>
          </div>
        </div>
      </div>
      <button class="btn" @click="closeUserEdit">退出编辑状态</button>
    </div>
    <ab-popup ref="AB_POPUP" :type="userEditFlag == 'add-mark'? 'right' : 'default'" :maskClose="userEditFlag!='mark-info'">
      <div class="user-edit-name" v-if="userEditFlag == 'name'"> 
        <i style="margin: 5px;">点击空白处关闭窗口</i>
        <ab-dinput v-model:value="inputValue" type="text" placeholder="请输入用户名" :clearicon="true"/>
        <ab-button type="hw-primary" @click="setUser('name')">修改用户名</ab-button>
      </div>
      <div v-if="userEditFlag.indexOf('mark') >= 0" :class="userEditFlag=='add-mark'?'mark-right':'mark-default'">
        <mark-card :data="markData" @selectaddr="showMark" @markdone="markDoneAction"></mark-card>
      </div>
    </ab-popup>
  </div>
</template>

<script>
import { nextTick, onMounted, ref } from '@vue/runtime-core'
import util from '@/assets/js/util'
import http from '@/axios/http'
import $tip from '../able_mod/AbToolTip'
import AbPopup from '../able_mod/AbPopup.vue'
import AbDinput from '../able_mod/AbDinput.vue'
import AbButton from '../able_mod/AbButton.vue'
import MarkCard from '../fun_mod/MarkCard.vue'
export default {
  components:{
    AbPopup,
    AbDinput,
    AbButton,
    MarkCard
  },
  props: ['data'],
  setup(props, ctx) {
    onMounted(() => {
      userInfo.value = props.data
    })
    let userInfo = ref()

    // 关闭用户编辑框
    function closeUserEdit() {
      let e = {}
      e.flag = 'CLOSE_USER_EDIT'
      ctx.emit('userEdit', e)
    }

    // 查询当前用户打卡日期列表
    let markDateList = ref([])
    let getMarkText = ref('选择足迹查询日期')
    let dateListStyle = ref('')
    async function getMarksDate(e, f) {
      // console.log(e)
      if (!f) {
        markDateList.value = []
        return
      }
      let g = {}
      g.openId = userInfo.value.openId
      let r = await http.getMarksDate(g)
      if (r.code == 10000) {
        markDateList.value = []
        let _data = r.data
        if (util.isNull(_data)) {
          $tip.message.open('这个人还没有足迹', 2500, 'primary')
        } else {
          for(let i in _data) {
            _data[i].dateStr = util.dateFormatStr(_data[i].markDate)
          }
          let _top =  e.pageY * 1 - 15 * 1 
          let _bottom = document.getElementById('footmarkMap').clientHeight - e.pageY 
          dateListStyle.value = _bottom > 320 ? `top: ${_top}px;` : `bottom: ${_bottom - 10}px;`
          markDateList.value = _data
        }
      }
    }

    // 按日期获取mark记录
    async function getMarks(date,dateStr) {
      let g = {}
				g.openId = userInfo.value.openId
				g.sTime = date+' 00:00:00'
				g.eTime = date+' 23:59:59'
				let r = await http.getMarks(g)
				if (r.code == 10000) {
          markDateList.value = []
          getMarkText.value = `查询${dateStr}的足迹`
          let e = {}
          e.flag = 'EDIT_MARKER_QUERY'
          e.data = r.data || []
          ctx.emit('markdone', e)
        }
    }

    // 用户信息编辑
    let AB_POPUP = ref(null)
    let userEditFlag = ref()
    let inputValue = ref('')
    async function editUserInfo(f,e) {
      // console.log(f,e)
      userEditFlag.value = f
      if (f == 'name') {
        inputValue.value = userInfo.value.name
        AB_POPUP.value.open()
      }
      if (f == 'avatar') {
        let f = e.target.files[0]
        if (f.size > 100*1024) {
          $tip.message.open('图片不能大于100k',1500,'error')
        } else {
          let r = await util.fileToBase64(f)
          if (r.indexOf('data:image/') >= 0) 
            setUser('avatar', r)
          else  
            $tip.message.open('无效的图片格式',1500,'error')
        }
      }
    }
    // 修改用户信息
    async function setUser(f, base64) {
      let p = {}
			p.openId = userInfo.value.openId
			if (f == 'name') p.name = inputValue.value
      if (f == 'avatar') p.avatar = base64
			let r = await http.setUser(p)
			if (r.code == 10000 ) {
        if (f == 'name') {
          userInfo.value.name = p.name
          nextTick(()=>{
            AB_POPUP.value.close()
          })
        }
        if (f == 'avatar') {
          userInfo.value.avatar = base64
        }
			}
    }

    // 添加打卡点
    let markData = ref({})
    function addMark(e) {
      e.flag = 'add-mark'
      markData.value = e
      userEditFlag.value = e.flag
      nextTick(()=>{
        AB_POPUP.value.open()
      })
    }
    // 显示打卡编辑界面
    function showMark(e) {
      AB_POPUP.value.close()
      if (e == 'close') return
      let md = {}
      md.flag = 'mark-info'
      if (!e.length) e.userOid = userInfo.value.openId
      md.markers = e
      markData.value = md
      userEditFlag.value = md.flag
      nextTick(()=>{
        AB_POPUP.value.open()
      })
    }
    // 用户编辑新增、修改打卡记录
    function markDoneAction(marker) {
      let e = {}
      e.flag = 'EDIT_MARKER_UPDATE'
      e.data = marker || []
      ctx.emit('markdone', e)
      AB_POPUP.value.close()
    }

    function isNull(v) {
      return util.isNull(v)
    }

    return {
      userInfo, closeUserEdit, getMarksDate, markDateList, getMarkText, dateListStyle, getMarks, 
      AB_POPUP, userEditFlag, inputValue, editUserInfo, setUser, markData, addMark, showMark, markDoneAction,
      isNull
    }
  }
}
</script>

<style lang="scss" scoped>
.user-edit {
  display: block;

  .user-info{
    @extend %view-flex;
    flex-direction: row;
    align-items: flex-start;
    position: fixed;
    top: 25px;left: calc(50% - 180px);
    width: 360px;
    padding: 0 5px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 5px #ccc;
    .avatar{
      position: relative;
      width: auto;height: auto;
      background-color: rgba(0,0,0,0);
      margin: 10px 5px;
      img{
        border-radius: 50%;
        width: 64px;height: 64px;
      }
      .img-file{
        position: absolute;
        top: -20px;left:0;
        width: 64px;height: 84px;
        cursor: pointer;
        opacity: 0;
      }
    }
    .info{
      @extend %view-flex;
      align-items: flex-start;
      padding: 10px;
      position: relative;
      b{
        cursor: pointer;
        font-size: 16px;
        color: #333;
      }
      i{
        margin-top: 3px;
        font-size: 14px;
        color: #333;
      }
      .date-btn{
        color: $color-primary;
        font-style: normal;
        cursor: pointer;
        font-size: 16px;
      }
      .date-list {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        z-index: 1001;

        .inner {
          position: absolute;
          left: calc(50% - 90px);
          display: block;
          width: auto;max-height: 360px;
          overflow-y: auto;
          overflow-x: hidden;
          background-color: #fff;
          box-shadow: 1px 1px 10px #aaa;
          border-radius: 5px;
          padding: 10px;
          margin-top: 36px;
          .item {
            padding: 10px;
            b{
              cursor: pointer;
              font-weight: 100;
            }
            b:hover{
              color: $color-primary;
            }
          }
        }
      }
    }
    .btn{
      position: absolute;
      top: 8px;right: 10px;
      cursor: pointer;
    }
    
  }

  .user-edit-name{
    @extend %view-flex;
    background-color:#fff;
    padding: 10px 25px;
    margin-top: -260px;
  }

  .mark-default{
    background-color:#fff;
  }

  .mark-right{
    background-color:#fff;
    width: 300px;height: calc(100vh);
  }
}
</style>